<fui-menu [menuHeadTemplate]="menuHeadTpl" selectedKey="user">
  <fui-menu-item icon="user" key="user" #alignToElement>
    user
  </fui-menu-item>
  <fui-sub-menu icon="user-group" menuTitle="group" [alignTo]="alignToElement">
    <div class="panel" (mouseleave)="leavePanel()">
      <div class="panel-left">
        <fui-menu-item key="role" icon="mask" (mouseenter)="hoverItem('role')">
          role
        </fui-menu-item>
        <fui-menu-item key="group" icon="user-group" (mouseenter)="hoverItem('group')">
          group
        </fui-menu-item>
      </div>
      <div class="panel-right" *ngIf="subItems.length > 0">
        <button fuiBtn="primary">create</button>
        <fui-menu-item *ngFor="let item of subItems" [key]="item">
          {{item}}
        </fui-menu-item>
      </div>
    </div>
  </fui-sub-menu>
</fui-menu>

<ng-template #menuHeadTpl let-collapsed="collapsed">
  <div class="menu-head">
    <div *ngIf="!collapsed">Company Logo</div>
    <div *ngIf="collapsed">C</div>
  </div>
</ng-template>
